<template>
  <el-dialog
    :visible.sync="visible"
    custom-class="login-pop"
    width="446px"
    top="0"
    :show-close="false"
    :append-to-body="true"
    :close-on-click-modal="false"
  >
    <i class="el-icon-circle-close" @click="closePop"></i>
    <div class="login-tip">
      <img class="wechat" src="@/assets/imgs/wechat.png" alt="" />
      微信扫码，立即登录小萤星
    </div>
    <div class="login-code">
      <div v-if="status == '1'" class="code">
        <img v-if="qrcodeurl" :src="qrcodeurl" width="200px" height="200px" />
      </div>
      <div v-else class="error">
        <div class="res">二维码已失效</div>
        <div class="btn">点击刷新</div>
      </div>
    </div>
    <div class="login-msg">
      扫码注册成功后代表同意
      <span @click="goPath('agreement')">《小萤星用户协议》</span>
      <span @click="goPath('pricy')">《隐私政策》</span>
    </div>
  </el-dialog>
</template>

<script>
import { getLoginQrCode } from "@/api/login";
import { fetchData } from "@/utils";
import { connectionSocket } from "@/http/websocket";
import { v4 as uuidv4 } from "uuid";

export default {
  name: "LoginPop",
  props: {
    show: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      visible: false,
      status: 1, // 二维码状态
      qrcodeurl: "",
    };
  },
  watch: {
    show: function (newVal) {
      this.visible = newVal;
      this.getQrcode();
    },
  },
  methods: {
    closePop() {
      this.$emit("update:show", false);
    },

    goPath(path) {
      this.$router.push(path);
    },

    getQrcode() {
      let uuid = uuidv4();
      localStorage.setItem("ws-auth-token", uuid);
      fetchData(
        getLoginQrCode,
        {
          wsAuthToken: uuid,
        },
        false
      ).then(async (res) => {
        this.qrcodeurl = res;
        this.connectionSocket();
      });
    },

    async connectionSocket() {
      let res = await connectionSocket();
      if (!res) {
        this.$router.push({ path: "/index" }).catch(() => {});
        this.closePop(); //关闭弹框
        this.$message.error("登录失败!");
        return;
      }
      this.$message.success("登录成功!");
      this.$emit("onClose", JSON.parse(res).nickname);
      this.closePop();
    },
  },
};
</script>

<style lang="less">
.login-pop {
  top: 50%;
  transform: translateY(-50%);
  padding-top: 40px;
  background: linear-gradient(135deg, #e5ecfb 0%, #f1ecfe 31%, #ffffff 100%);
  box-shadow: 0 10px 24px 1px #26262d1a;
  border-radius: 16px;
  overflow: visible;
  position: relative;
  box-sizing: border-box;
  .el-dialog__header {
    display: none;
  }
  .el-icon-circle-close {
    position: absolute;
    top: -30px;
    right: -30px;
    font-size: 28px;
    color: #999999;
  }
  .login-tip {
    font-size: 16px;
    color: #202020;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    .wechat {
      width: 20px;
      height: 15px;
      margin-right: 6px;
    }
  }
  .login-code {
    width: 210px;
    height: 210px;
    border-radius: 12px;
    padding: 6px;
    box-sizing: border-box;
    background-color: #fff;
    margin: 60px auto;
    .error {
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .res {
        color: #000;
        font-size: 15px;
        font-weight: 400;
        margin-bottom: 14px;
      }
      .btn {
        text-decoration: underline;
        color: #6965ea;
        cursor: pointer;
      }
    }
  }
  .login-msg {
    font-size: 13px;
    font-weight: 400;
    color: #8c8c8c;
    text-align: center;
    span {
      cursor: pointer;
      &.hover {
        color: #6965ea;
      }
    }
  }
}
</style>
